<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布商品</title>
</head>
<body>

<form id="productForm">

    商品名称：<input type="text" name="prodName" id="prodName"><br>
    商品类型：
    <select id="prodType" name="prodType"></select>
    <br>
    商品价格：<input type="text" name="prodPrice" id="prodPrice"><br>
    商品折扣：<input type="text" name="prodDiscount" id="prodDiscount"><br>
    封面展示：<input type="file" accept="image/*" name="prodCover" id="prodCover"><br>
    <img id="showCover">
    <br>
    详细图片：<input type="file" multiple accept="image/*" name="imgDetail" id="imgDetail"><br>
    商品简介：
    <textarea id="prodSummary" name="prodSummary" style="resize: none;width: 400px;height: 200px"></textarea><br>

    <button type="button" id="btnSaveProduct">发布商品</button>


</form>

</body>

<script src="js/jquery-3.2.1.js"></script>
<script>
    $(function () {
        getAllType();

        $('#prodType').trigger('change');

        $('#prodCover').on('change', function () {
            var file = this.files[0];
            var reader = new FileReader();
            reader.onload = function (e) {
                //console.log(e.target.result);
                $('#showCover').attr('src', e.target.result);

            }
            reader.readAsDataURL(file);
            //console.log(file);
        })

        $('#btnSaveProduct').click(function () {
            var formData = new FormData($('#productForm').get(0));
            //console.log(formData)
            //上传文件
            $.ajax({
                url: 'add_product.do',
                data: formData,
                type: 'post',
                dataType: 'json',
                processData: false,
                contentType: false
            }).done(function (data) {

            }).fail(function () {

            })
        })
    })


    function getAllType() {
        $('#prodType').empty();
        $.post('query_all_type.do', {tname: null}, function (data) {
            if (data.code == 200) {
                $.each(data.result, function (index, obj) {
                    var opt = $('<option></option>');
                    opt.text(obj.tname);
                    opt.val(obj.tno);
                    $('#prodType').append(opt);
                })
            }
        }, "JSON");
    }
</script>
</html>